<template>
  <div class="RingMenuContainer">
    <div class="main">
      <div 
        class="navigation-circle"
        :style="[
          {'transform': 'scale(' + this.scaleNumber + ')'}
        ]"
      >
        <div class="navigation-circle__inner">
          <svg
            class="navigation-circle-svg navigation-circle-svg--opaque"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            x="0px"
            y="0px"
            viewbox="0 0 320 320"
          >
            <circle
              cx="68"
              cy="87"
              r="160"
              fill="none"
              stroke-width="1"
              stroke="#c644fc"
              stroke-linecap="round"
              stroke-miterlimit="10"
              style="stroke-dashoffset: 0; stroke-dasharray: none"
            ></circle>
          </svg>
          <svg
            class="navigation-circle-svg navigation-circle-svg--mask"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            x="0px"
            y="0px"
            viewbox="0 0 320 320"
            style="overflow: visible"
          >
            <circle
              id="mask-circle"
              cx="68"
              cy="87"
              r="160"
              fill="none"
              stroke-width="2"
              stroke="#c644fc"
              stroke-linecap="round"
              stroke-miterlimit="10"
              style="stroke-dasharray: 1005.3088px"
            ></circle>
          </svg>
          <ul class="navigation-circle__list">
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(1)"
                @mouseenter="calculateOffset(1)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">首页</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    快速回到主站
                  </h4>
                </div>
              </a>
            </li>
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(2)"
                @mouseenter="calculateOffset(2)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">直播</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    你关注的超级小桀等2人正在直播
                  </h4>
                </div>
              </a>
            </li>
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(3)"
                @mouseenter="calculateOffset(3)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">电影</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    最新上架的复仇者联盟4正在热播
                  </h4>
                </div>
              </a>
            </li>
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(4)"
                @mouseenter="calculateOffset(4)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">游戏</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    这里有全网游戏最全的攻略
                  </h4>
                </div>
              </a>
            </li>
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(5)"
                @mouseenter="calculateOffset(5)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">新闻</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    冬奥会圆满结束了！
                  </h4>
                </div>
              </a>
            </li>
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(6)"
                @mouseenter="calculateOffset(6)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">知识</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    为什么......
                  </h4>
                </div>
              </a>
            </li>
            <li class="navigation-circle-list-item">
              <a
                class="navigation-circle-list-item__point"
                @click="onClick(7)"
                @mouseenter="calculateOffset(7)"
                @mouseleave="onMouseLeave()"
              >
                <div class="navigation-circle-list-item__meta">
                  <h3 class="navigation-circle-list-item__title">我的</h3>
                  <h4 class="navigation-circle-list-item__subtitle">
                    编辑个人的信息
                  </h4>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {onMouseLeave, onClick, calculateOffset, setCirclePath} from './index'
import { mapGetters } from 'vuex'

export default {
  name: "RingMenu",
  data() {
    return {
      htmlWidth: document.body.clientWidth,//窗口宽度
      scaleNumber: 0.6,//缩放大小
    }
  },
  computed: {
    ...mapGetters(['isCollapse']),
  },
  mounted() {
    setCirclePath();
    this.resizeScale()
    window.onresize = () => {//窗口大小改变放大缩小
      this.resizeScale()
    }
  },
  watch: {
    isCollapse(newVal, oldVal) {
      // console.log(newVal, oldVal);
      this.resizeScale()
    }
  },
  methods: {
    onMouseLeave,
    onClick,
    calculateOffset,
    resizeScale() {
      this.htmlWidth = document.body.clientWidth;
      if(this.isCollapse) {//折叠起来
        if(this.htmlWidth <= 1450) {
          this.scaleNumber = 0.6
        } else if(this.htmlWidth > 1450 && this.htmlWidth <= 1537) {
          this.scaleNumber = 0.65
        } else if(this.htmlWidth > 1537 && this.htmlWidth <= 1900) {
          this.scaleNumber = 0.75
        } else {
          this.scaleNumber = 0.85
        }
      } else {//展开的
        if(this.htmlWidth <= 1450) {
          this.scaleNumber = 0.52
        } else if(this.htmlWidth > 1450 && this.htmlWidth <= 1537) {
          this.scaleNumber = 0.6
        } else if(this.htmlWidth > 1537 && this.htmlWidth <= 1900) {
          this.scaleNumber = 0.65
        } else {
          this.scaleNumber = 0.75
        }
      }
    }
  },
};
</script>

<style lang='less' scoped>
@import './style.css';
</style>